<!-- 正文开始 -->
<style>
    :root {
        --theme1: #2CBB79; /*主题颜色1*/
        --bgColor1: #fff; /*图表背景颜色*/
    }

    .layui-body-header + div {
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        bottom: 0;
        overflow: auto;
    }

    .share1 > div {
        width: 100%;
    }

    .share2 > div {
        width: calc((100% - 20px) / 2);
    }

    .share3 > div {
        width: calc((100% - 40px) / 3);
    }

    .share4 > div {
        width: calc((100% - 60px) / 4);
    }

    .share5 > div {
        width: calc((100% - 80px) / 5);
    }

    .share6 > div {
        width: calc((100% - 100px) / 6);
    }

    .layui-fluid {
        padding: 0 10px 0 20px;
        overflow-y: auto;
    }

    .layui-form-select dl dd.layui-this {
        background-color: var(--theme1)
    }

    form[lay-filter="materialDataForm"] .layui-table-body::-webkit-scrollbar {
        /*overflow: scroll;*/
        /*display: none;*/
        /*width: 3px;*/
    }

    /* div[lay-id="materialDataTable"] .layui-table-body {
         width: calc(100% + 5px);
     }*/

    /*头部标题 时间选择*/
    .headerBox {
        display: flex;
        /*margin: 0 0 20px;*/
        padding-bottom: 20px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        z-index: 9999;
        background-color: #F0F2F5;
    }

    .headerTitle {
        height: 26px;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        position: relative;
        padding: 0 16px;
        display: flex;
        align-items: center;
    }

    .headerTitle:before {
        content: "";
        display: block;
        height: 100%;
        width: 6px;
        background: #009C5E;
        position: absolute;
        left: 0;
        top: 0;
    }

    .headerTime {
        display: flex;
    }

    .headerTime .timeSelect {
        width: 110px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        border: 1px solid #EDEFF4;
        margin-right: 10px;
    }

    .headerTime .selectBox {
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        box-sizing: border-box;
        border: 1px solid #EDEFF4;
        margin-right: 10px;
    }

    .headerTime .timeFreedom {
        box-sizing: border-box;
        width: 270px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #EDEFF4;
        padding: 0 10px;
        line-height: 38px;
        display: flex;
    }

    .timeFreedom input,
    .headerTime .timeSelect input,
    .headerTime .selectBox input {
        height: 48px;
        line-height: 48px;
        border-width: 0;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        background-color: transparent;
    }

    .timeFreedom .layui-icon {
        font-size: 30px;
        margin-top: 5px;
    }

    .timeFreedom input {
        width: calc(100% - 30px);
        display: inline-block;
    }

    .timeFreedom input::placeholder {
        font-size: 16px;
    }

    /*头部数据统计样式*/
    .statBox {
        margin-bottom: 20px;
    }

    .statBox > div {
        display: none;
        transition: all 300ms;
    }

    .statBox > div.active {
        display: flex;
    }

    .statBoxItem {
        display: flex;
        justify-content: space-between;
    }

    .statBoxItem > .statBoxItemList {
        box-sizing: border-box;
        padding: 28px 20px;
        height: 132px;
        background: #FFFFFF;
        border-radius: 5px 5px 5px 5px;
        display: flex;
        cursor: pointer;
        flex: 1;
        margin-right: 20px;
        transition: all 1000ms;
    }

    .statBoxItem > .statBoxItemList:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
    }

    .statBoxItem > .statBoxItemList:last-child {
        margin-right: 0;
    }

    .statBoxItemList > .statBoxItemListContent {
        flex: 1;
    }

    .statBoxItemListImg {
        width: 70px;
        height: 70px;
        margin-top: 3px;
    }

    .statBoxItemListContent .statBoxItemListName {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        margin-bottom: 10px;
    }

    .statBoxItemListContent .statBoxItemListNum {
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        line-height: 42px;
    }

    /* 报表内容区域*/
    .reportMain {
        width: 100%;
    }

    .reportMain .layui-form-select .layui-input {
        width: auto;
        padding-right: 30px;
    }

    .headerTime .selectBox .layui-input {
        width: auto;
        padding-right: 10px;
    }

    .reportBox {
        display: flex;
        font-family: Roboto-Regular, Roboto;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .reportBox > div {
        flex: 1;
        background-color: var(--bgColor1);
        height: 460px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 10px 20px;
        transition: all 1000ms;
        box-sizing: border-box;
        overflow: hidden;
        /*min-width: 520px;*/
    }

    .reportBoxS > div {
        flex: none;
        margin-right: 0;
    }

    .reportBox > div:last-child {
        margin-right: 0;
    }

    .reportBox > div:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
        border-radius: 5px 5px 5px 5px;
    }

    .reportItem {
        display: flex;
        flex-direction: column;
    }

    .reportItemBox {
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .reportItemBox::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    .reportItemBox::-webkit-scrollbar {
        width: 5px;
    }

    .reportItemBox:hover::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

    .reportItemBox .reportItemEcharts {
        width: 100%;
        height: 100%;
    }

    .reportItemBox .reportItemCenter {
        width: 100%;
        height: auto;
    }

    .reportItem select,
    .reportItem input {
        width: 110px;
        height: 38px;
        background: #F5F6FA;
        border-radius: 5px 5px 5px 5px;
    }

    .reportItem .layui-form-select .layui-edge {
        border-top-color: var(--theme1)
    }


    .reportItem > .reportItemHeader {
        display: flex;
        height: 40px;
        align-items: center;
    }

    .reportItemHeaderTitle {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 23px;
    }

    .reportItemHeaderSwitch {
        width: 106px;
        height: 24px;
        background: #9AAEBB;
        border-radius: 16px 16px 16px 16px;
        box-sizing: border-box;
        padding: 2px;
        display: flex;
        margin-right: auto;
        margin-left: 30px;
    }

    .reportItemHeaderSwitchItem {
        width: 51px;
        height: 20px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 20px;
        background-color: transparent;
        border-radius: 10px;
        cursor: pointer;
    }

    .reportItemHeaderSwitchItem.active {
        background-color: #fff;
        color: #9AAEBB;
    }

    .reportItemHeaderSelect {
        margin-right: 0;
        margin-left: auto;
    }

    .reportItemHeaderMore {
        margin-left: 30px;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }

    .reportItemUnit {
        margin: 5px 0;
        height: 14px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
    }

    .reportItemTips {
        display: flex;
        height: 42px;
        overflow: hidden;
        box-sizing: border-box;
        margin: 5px 0;
    }

    .reportItemTips > div {
        flex: 1;
        height: 42px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #9AAEBB;
        box-sizing: border-box;
        margin-right: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .reportItemTips > div:last-child {
        margin-right: 0;
    }

    .reportItemTips > div img {
        width: 28px;
        height: 28px;
        overflow: hidden;
        margin-right: 10px;
    }

    .reportItemTips > div p {
        font-size: 14px;
        font-weight: 400;
        color: #E55B4A;
        line-height: 16px;
    }

    .colorGrey > div p {
        color: #333333;
    }

    .listBox1 > .listItem1 {
        display: flex;
        align-items: center;
        margin-top: 17px;
    }

    .listItem1 .listItem1Name {
        width: 70px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem1 .listItem1ProgressBox {
        margin-right: 20px;
        margin-left: 10px;
        flex: 1;
        height: 16px;
        background: #EDEFF2;
        border-radius: 20px;
        display: flex;
        position: relative;
    }

    .listItem1ProgressBox .listItem1ProgressBar {
        height: 100%;
        background: #2CBB79;
        border-radius: 20px;
        /*position: relative;*/
        width: 0;
    }

    .listItem1ProgressBox .listItem1ProgressBar:after {
        content: attr(val);
        position: absolute;
        right: 5px;
        /*transform: translateX(100%);*/
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        top: 0;
    }

    .listItem1 .listItem1Ratio {
        font-size: 14px;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;
        width: 60px;
        overflow: hidden;
    }

    .listBox1 > .listItem1:first-child .listItem1ProgressBox .listItem1ProgressBar {
        background: #FFB94D;
    }

    .listBox1 > .listItem1:first-child .listItem1Ratio {
        color: #FFB94D;
    }

    .listBox2 > .listItem2 {
        display: flex;
        flex-direction: column;
        margin-top: 12px;
    }

    .listItem2 .listItem2Top {
        display: flex;
        font-size: 12px;
        color: #333333;
        line-height: 14px;
        height: 20px;
    }

    .listItem2Top .listItem2Name {
        width: 80px;
        box-sizing: border-box;
        overflow: hidden;
        margin-right: 10px;
        white-space: nowrap;
    }

    .listItem2Top .listItem2Code {
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        flex: 1;
    }

    .listItem2 .listItem2Bottom {
        display: flex;
    }

    .listItem2Bottom .listItem2ProgressBox {
        box-sizing: border-box;
        flex: 1;
        height: 15px;
        border: 1px solid transparent;
        border-radius: 10px;
        background-image: linear-gradient(#fff, #fff), linear-gradient(to right, rgba(182, 205, 106, 1), rgba(0, 156, 94, 1));
        background-origin: border-box;
        background-clip: content-box, border-box;
    }

    .listItem2ProgressBox .listItem2ProgressBar {
        background-image: linear-gradient(to right, #B6CD6A, #009C5E);
        border: 2px solid transparent;
        box-sizing: border-box;
        height: 13px;
        border-radius: 5px;
        background-clip: content-box;
        width: 0;
    }

    .listItem2 .listItem2Val {
        width: 80px;
        margin: 0 10px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        overflow: hidden;
        cursor: pointer;
    }

    .listItem2 .listItem2Ratio {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #00C573;
        line-height: 16px;
        width: 60px;
        text-align: right;
        overflow: hidden;
    }

    .listBox3Header {
        display: flex;
        height: 52px;
        background: #F2F4F8;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        align-items: center;
    }

    .listItem3 {
        display: flex;
        height: 52px;
        border-bottom: 1px dashed #ccc;
        box-sizing: border-box;
        align-items: center;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        color: #000000;
    }


    .listBox3Header .listBox3HeaderAvatar {
        width: 60px;
        margin-right: 35px;
        text-align: center;
    }

    .listItem3 .listBox3Avatar {
        width: 60px;
        margin-right: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .listItem3 .listBox3Avatar img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .listBox3Header .listBox3HeaderName,
    .listItem3 .listBox3Name {
        flex: 2;
        margin-right: 35px;
    }

    .listBox3Header .listBox3HeaderAbnormal,
    .listItem3 .listBox3Abnormal {
        flex: 2;
        margin-right: 35px;
    }

    .listBox3Header .listBox3HeaderRatio,
    .listItem3 .listBox3Ratio {
        width: 80px;
        text-align: center;
    }

    .listBox4 .listItem4 {
        display: flex;
        margin-top: 10px;
        height: 41px;
        flex-direction: column;
    }

    .listItem4 .listItem4Top {
        display: flex;
        height: 18px;
        line-height: 14px;
    }

    .listItem4Top .listItem4Name {
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        color: #333333;
        width: 70px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
    }

    .listItem4Top .listItem4Code {
        flex: 1;
        font-size: 12px;
        color: #333333;
        box-sizing: border-box;
        overflow: hidden;
    }

    .listItem4 .listItem4Bottom {
        display: flex;
        align-items: center;
    }

    .listItem4Bottom .listItem4ProgressBox {
        height: 8px;
        background: #EDEFF2;
        border-radius: 102px 102px 102px 102px;
        flex: 1;
        margin-right: 10px;
    }

    .listItem4 .listItem4ProgressBox .listItem4ProgressBar {
        height: 8px;
        background: linear-gradient(90deg, #B6CD6A 0%, #009C5E 100%);
        border-radius: 7px 7px 7px 7px;
        position: relative;
    }

    .listItem4 .listItem4ProgressBox .listItem4ProgressBar:before {
        position: absolute;
        content: attr(val);
        right: -5px;
        transform: translate(100%, -50%);
        font-size: 12px;
        font-weight: 600;
        color: #333333;
        line-height: 16px;
        top: 50%;
    }

    .listItem4 .listItem4Ratio {
        width: 100px;
        height: 16px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;
        text-align: center;
        overflow: hidden;
        margin-left: 20px;
    }

    .listBox4 .listItem4:first-child .listItem4Ratio {
        color: #FFB94D;
    }

    .listBox5 .listItem5 {
        display: flex;
        margin-top: 15px;
        height: 25px;
        flex-direction: column;
    }

    .listItem5 .listItem5Top {
        display: flex;
        height: 14px;
        font-size: 12px;
        color: #333333;
        line-height: 14px;
        margin-bottom: 5px;
    }

    .listItem5Top .listItem5Name {
        width: 100px;
        overflow: hidden;
    }

    .listItem5Top .listItem5Code {
        flex: 1;
        font-family: PingFang SC-Regular, PingFang SC;
        margin: 0 20px;
    }

    .listItem5ProgressBox {
        height: 8px;
        margin-right: 100px;
    }

    .listItem5ProgressBar {
        background-color: #72B65F;
        height: 100%;
        position: relative;
    }

    .listItem5ProgressBar:before {
        position: absolute;
        content: attr(val);
        right: -55px;
        width: 50px;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #333333;
    }

    .listItem5ProgressBar:after {
        position: absolute;
        content: attr(ratio);
        right: -100px;
        width: 50px;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #009C5E;
    }

    .listBox6 > .listItem6 {
        margin-top: 15px;
        width: 100%;
        overflow: hidden;
    }

    .listItem6 > .listItem6Top,
    .listItem6 > .listItem6Bottom {
        display: flex;
        align-items: center;
    }

    .listItem6Top .listItem6Name {
        width: 100px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem6Top .listItem6code {
        flex: 1;
        margin-left: 15px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        white-space: nowrap;
    }

    .listItem6Bottom {
        margin-top: 5px;
    }

    .listItem6Bottom .listItem6ProgressBox {
        flex: 1;
        margin-right: 100px;
        height: 8px;
        background: #EDEFF2;
        border-radius: 102px 102px 102px 102px;
    }

    .listItem6ProgressBox .listItem6ProgressBar {
        height: 8px;
        background: #2CBB79;
        border-radius: 102px 102px 102px 102px;
        position: relative;
    }

    .listItem6ProgressBar:after {
        content: attr(val);
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -110px;
        width: 100px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
    }

    .listItem6Ratio {
        width: 60px;
        font-size: 14px;
        font-weight: 500;
        color: #2CBB79;
        line-height: 16px;

    }

    .listBox6 > .listItem6:first-child .listItem6ProgressBox .listItem6ProgressBar {
        background: #FFB94D;
    }

    .listBox6 > .listItem6:first-child .listItem6Ratio {
        color: #FFB94D;
    }

    .topLayout {
        display: flex;
        justify-content: space-between;
    }

    .notice {
        width: 392px;
        background-color: #fff;
        height: 460px;
        box-sizing: border-box;
        padding: 20px 0 0 20px;
        border-radius: 5px;
        transition: all 1000ms;
    }

    .notice:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 8px;
    }

    .noticeHeader {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        height: 25px;
        padding-right: 20px;
    }

    .noticeTitle {
        font-size: 20px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .noticeMore {
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
        display: none;
    }

    .noticeBox {
        margin-top: 20px;
        height: calc(100% - 50px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 15px;
        position: relative;
    }

    .noticeBoxItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        height: 38px;
        cursor: pointer;
        transition: all 300ms;
    }

    .noticeBoxItem:hover {
        transform: scale(1.05);
    }

    .noticeBoxItem:hover .noticeBoxContent {
        color: #009C5E;
    }

    .noticeBoxList > .noticeBoxItem:first-child > .noticeBoxDrop {
        background: #FFB94D;
    }

    .noticeBoxDrop {
        width: 6px;
        height: 6px;
        background: #E1E5F3;
        border-radius: 50%;
        margin-right: 14px;
    }

    .noticeBoxContent {
        flex: 1;
        overflow: hidden;
        height: 18px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }

    .noticeBoxTime {
        width: 60px;
        height: 18px;
        font-size: 14px;
        overflow: hidden;
        font-weight: 400;
        color: #999999;
        text-align: right;
    }

    .noticeDetailsBox {
        background: #F8F9FD;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #E4ECF4;
        margin-bottom: 15px;
        box-sizing: border-box;
        padding: 20px 30px;
    }

    .noticeDetailsTitle {
        height: 21px;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 19px;
        text-align: center;
        margin-bottom: 20px;
    }

    .noticeDetailsContent {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
    }

    .noticeDetailsBox a {
        color: #01AAED;
        text-decoration: revert;
    }
</style>

<div class="layui-fluid" id="reportBodyBox">
    <div class="reportBody">
        <!-- 领料趋势变化图报表-->
        <div class="reportMain  layui-form topLayout">
            <div class="reportBox" style="width: calc(100% - 412px)">
                <div class="reportItem" id="pickingTrends">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">采购趋势变化图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderSelect">
                            <select name="supplierId" lay-filter="supplierId"></select>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">数量</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
            </div>
            <div class="notice">
                <div class="noticeHeader">
                    <div class="noticeTitle">待办任务</div>
                    <div class="noticeMore"> 更多<i class="layui-icon layui-icon-right"></i></div>
                </div>
                <div class="noticeBox">
                    <ul class="noticeBoxList" id="noticeBoxList">
                        <!--<li class="noticeBoxItem">
                            <div class="noticeBoxDrop"></div>
                            <div class="noticeBoxContent layui-elip">
                                此处为通知此处为通知此处为通知此处此处为通知此处为通知此处为通知此处此处为通知此处为通知此处为通知此处此处为通知此处为通知此处为通知此处
                            </div>
                            <div class="noticeBoxTime">11/01</div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 标题 时间选择 -->
        <div class="headerBox" id="headerBox">
            <div class="headerTitle">仓库统计分析</div>
            <div class="headerTime layui-form">
                <div class="selectBox">
                    <select name="warehouseId" lay-filter="warehouseIdAll">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="timeSelect">
                    <select name="queryType" lay-filter="timeType">
                        <option value="">请选择</option>
                        <option value="3">日</option>
                        <option value="2">周</option>
                        <option value="1" selected>月</option>
                    </select>
                </div>
                <div class="timeFreedom">
                    <i class="layui-icon layui-icon-date" id="timeIcon" style="cursor: pointer"></i>
                    <input type="text" class="layui-input" readonly="true" id="time1" placeholder="请选择起止时间">
                </div>
            </div>
        </div>

        <!--  仓库统计分析  -->
        <div class="statBox">
            <!--仓库统计分析-->
            <div class="statBoxItem active" id="statBoxItem">
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">库存总量</p>
                        <p class="statBoxItemListNum" id="inventoryTotal">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/1.png">
                    </div>
                </div>
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">总库物料种类（种）</p>
                        <p class="statBoxItemListNum" id="materialTypeTotal">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/2.png">
                    </div>
                </div>
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">入库种数</p>
                        <p class="statBoxItemListNum" id="inStorageTotal">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/3.png">
                    </div>
                </div>
                <div class="statBoxItemList">
                    <div class="statBoxItemListContent">
                        <p class="statBoxItemListName">出库总数</p>
                        <p class="statBoxItemListNum" id="outStorageTotal">0</p>
                    </div>
                    <div class="statBoxItemListImg">
                        <img src="assets/images/workshopReportImg/4.png">
                    </div>
                </div>
            </div>
        </div>

        <!-- 报表-->
        <div class="reportMain reportMainAll">
            <div class="reportBox share1">
                <div class="reportItem" id="pickingTime">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle" style="flex: 1">出入库单量统计</div>
<!--                        <div class="reportItemHeaderSwitch">-->
<!--                            <div class="reportItemHeaderSwitchItem active">按数量</div>-->
<!--                            <div class="reportItemHeaderSwitchItem">按金额</div>-->
<!--                        </div>-->

                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit">数量</div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
            </div>
            <div class="reportBox reportBoxS share3">
                <div class="reportItem" id="equipmentPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">出库物料对比图（TOP10）</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit"></div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox1">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reportItem" id="personnelPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">入库物料对比图（TOP10)</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemUnit"></div>
                    <div class="reportItemBox">
                        <div class="reportItemCenter">
                            <div class="listBox1">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reportItem" id="workOrderPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">入库类型对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>

                <div class="reportItem" id="shopFloorPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">出库类型对比图</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="vendorItemConsumption">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">物料类别分析</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>
                <div class="reportItem" id="productPicking">
                    <div class="reportItemHeader">
                        <div class="reportItemHeaderTitle">仓库类型分析</div>
                        <div class="reportItemHeaderSwitch">
                            <div class="reportItemHeaderSwitchItem active">按数量</div>
                            <div class="reportItemHeaderSwitchItem">按金额</div>
                        </div>
                        <div class="reportItemHeaderMore">
                            更多<i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="reportItemBox">
                        <div class="reportItemEcharts"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<!--allDataChart -->
<!--数据图表弹窗-->
<script type="text/html" id="allDataChart">
    <form lay-filter="allDataChartForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div class="layui-row table-bor" style="height: calc(100% - 10px);" id="allDataChartFormchartDom"></div>
            <div style="display: none" id="allDataChartTableBox">
                <table class="layui-table" id="allDataChartTable" lay-filter="allDataChartTable"
                       style="display: none"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="allDataChartFormExport">导出数据</button>
        </div>
    </form>
</script>

<!--materialDataPop -->
<!--数据图表弹窗-->
<script type="text/html" id="materialDataPop">
    <form lay-filter="materialDataForm" class="layui-form model-form"
          style="padding: 0 15px 10px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box" style="height: calc(100% - 45px); overflow-y: scroll">
            <div>
                <table class="layui-table" id="materialDataTable" lay-filter="materialDataTable"></table>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" id="materialDataFormExport">导出数据</button>
        </div>
    </form>
</script>

<!--公告详情-->
<script type="text/html" id="noticeDetails">
    <form lay-filter="noticeDetailsForm" class="layui-form model-form"
          style="padding: 10px 15px;height: calc(100% - 20px);overflow: hidden;">
        <div class="open-details-box noticeDetailsBox" style="height: calc(100% - 60px); overflow-y: scroll">
            <h1 class="layui-elip noticeDetailsTitle" id="noticeDetailsTitle"></h1>
            <div class="noticeDetailsContent" id="noticeDetailsContent"></div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!--公告模板-->
<script id="noticeTemplate" type="text/html">
    {{#
    var fn = function(dateString){
    const date = new Date(dateString);
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return month+"/"+day;
    };
    }}

    {{# layui.each(d, function(index, item){ }}
    <li class="noticeBoxItem" data="{{= JSON.stringify(item) }}">
        <div class="noticeBoxDrop"></div>
        <div class="layui-elip noticeBoxContent">{{ item.title }}</div>
        <div class="noticeBoxTime">{{ fn(item.createTime) }}</div>
    </li>
    {{# }); }}
    {{# if(d.length === 0){ }}
    无数据
    {{# } }}


</script>

<!-- js部分 -->
<script src="/admin/assets/libs/echarts/echarts.min.js"></script>
<script src="/admin/assets/libs/echarts/echartsTheme.js"></script>

<script>
    layui.use(['layer', 'element', 'config', 'admin', 'form', 'table', 'laydate'], function () {
        let $ = layui.jquery;
        let {layer, element, config, table, admin, form, laydate, laytpl, upload} = layui;

        let pickingTrendsObj = {
                param: 'qua', //qua 数量 money 金额
                supplierId: '',
                Total: 0,
            },
            pickingTrendsData = [],
            headerObj = {/*全部图表的(时间、主柜)参数*/
                queryType: 1,
                endTime: '',
                startTime: '',
                warehouseId: '',
            },
            inAdnOutObj = {
                total: 0,
                param: 'qua',
            },
            inAdnOutData = [],
            configData = {
                "equipmentPicking": {
                    name: '出库物料对比图（TOP10）',
                    id: 'equipmentPicking',
                    parameter: {
                        param: 'qua', //qua 数量 money 金额
                    },
                    style: 4,
                    url: 'enterprise/home/admin/home/outStorageMaterialTop',
                    data: []
                },
                "personnelPicking": {
                    name: '入库物料对比图（TOP10）',
                    id: 'personnelPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 4,
                    url: 'enterprise/home/admin/home/inStorageMaterialTop',
                    data: []
                },
                "workOrderPicking": {
                    name: '入库类型对比图',
                    id: 'workOrderPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 16,
                    url: 'enterprise/home/admin/home/inStorageTypeTop',
                    data: []
                },
                "shopFloorPicking": {
                    name: '出库类型对比图',
                    id: 'shopFloorPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 16,
                    url: 'enterprise/home/admin/home/outStorageTypeTop',
                    data: []
                },
                "vendorItemConsumption": {
                    name: '物料类别分析',
                    id: 'vendorItemConsumption',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 16,
                    url: 'enterprise/home/admin/home/productTypeTotal',
                    data: []
                },
                "productPicking": {
                    name: '仓库类型分析',
                    id: 'productPicking',
                    parameter: {param: 'qua'}, //qua 数量 money 金额
                    style: 16,
                    url: 'enterprise/home/admin/home/warehouseTypeTotal',
                    data: []
                }
            };
        form.render('select');


        let headerIsShow = $('.layui-body-header').hasClass('show'),
            eleHeight = $('#pickingTrends').outerHeight() - $('#pickingTrends').offset().top;
        $("#reportBodyBox").scroll(function () {
            if ($('#pickingTrends').offset().top <= -(eleHeight)) {
                $('#headerBox').css({
                    position: 'fixed',
                    top: headerIsShow ? '100px' : '75px',
                    width: $('#headerBox').parent().width() + "px"
                });
                $('.statBox').css({marginTop: (headerIsShow ? "50px" : "30px")});

            } else {
                $('#headerBox').css({'position': 'relative', top: '0'});
                $('.statBox').css({marginTop: "0"});
            }
        });


        init();

        // 入口方法
        function init() {
            // 采购趋势变化图
            getPickingTrendsEcharts(pickingTrendsObj);

            // 出入库单量统计
            getInAndOutStorageEcharts(headerObj)

            // 用料数据分析
            getWarehouseTotal();

            // 请求所有报表数据
            getReportData(configData);

            //获取公告数据
            getNoticeData();

        }

        //获取公告数据
        function getNoticeData() {
            admin.showLoading('.noticeBox', 1);
            admin.req('enterprisecab/bill/admin/workshopReport/getUpgradeReport', {}, res => {
                admin.removeLoading('.noticeBox', false, false);
                if (res.code === 200) {
                    showNotice(res.data);
                } else {
                    showNotice([]);
                }
            })
        }

        //渲染公告界面
        function showNotice(_data) {
            let noticeTpl = noticeTemplate.innerHTML, noticeView = document.getElementById('noticeBoxList');
            laytpl(noticeTpl).render(_data, function (html) {
                noticeView.innerHTML = html;
            });
        }

        //公告点击事件
        $('#noticeBoxList').delegate('.noticeBoxItem', 'click', function () {
            let data = JSON.parse($(this).attr('data'));
            admin.open({
                type: 1,
                area: ['1180px', '700px'],
                offset: '65px',
                title: '公告详情',
                content: $('#noticeDetails').html(),
                success: function () {
                    $('#noticeDetailsTitle').text(data.title);
                    $('#noticeDetailsContent').html(data.detail);
                    $("#noticeDetailsContent").delegate("img", "click", function () {
                        admin.previewImg(this)
                    });
                }
            });
        });


        // 请求仓库下拉数据
        admin.reqSync('enterprisecab/warehouse/admin/warehouse/list?limit=9999', {}, res => {
            if (res.code === 200) {
                loadReportSelectHtml(res.data, "全部", 'warehouseId', 2, 'headerBox')
            }
        }, 'get');

        // 请求供应商列表
        admin.reqSync('enterprise/home/admin/home/supplierList?limit=9999', {}, res => {
            if (res.code === 200) {
                loadReportSelectHtml(res.data, "全部", 'supplierId', 3, 'pickingTrends')
            }
        }, 'get');

        // 采购趋势变化图 供应商选项
        form.on('select(supplierId)', function (data) {
            pickingTrendsObj.supplierId = data.value;
            getPickingTrendsEcharts(pickingTrendsObj);
        });

        // 用料数据分析 所有报表  仓库选项
        form.on('select(warehouseIdAll)', function (data) {
            headerObj.warehouseId = data.value;
            getReportData(configData);
            getWarehouseTotal();
            getInAndOutStorageEcharts(headerObj)
        });

        // 请求采购趁势变化
        function getPickingTrendsEcharts(_obj) {

            admin.req(_obj.param === 'qua' ? 'enterprise/home/admin/home/purchaseTrendByNum' :
                'enterprise/home/admin/home/purchaseTrendBySum', _obj,
                res => {
                    if (res.code === 200) {
                        let Total = 0;
                        let _data = res?.data.map(item => {
                            Total += _obj.param == 'qua' ? Number(item.purchaseNum) : Number(item.purchaseAmount)
                            return {
                                name: item.purchaseDate,
                                value: _obj.param == 'qua' ? Number(item.purchaseNum) : Number(item.purchaseAmount)
                            }
                        })
                        pickingTrendsObj.Total = Total;
                        pickingTrendsData = _data;
                        pickingTrendsEcharts(pickingTrendsData, document.getElementById('pickingTrends'), ['采购'], 1, _obj.param);
                    }
                })
        }

        // 请求出入库单量统计
        function getInAndOutStorageEcharts(_obj) {
            admin.req('enterprise/home/admin/home/inventoryInOutTotal', _obj,
                res => {
                    if (res.code === 200) {
                        let _data = res?.data.map(item => {
                            return {
                                name: item.inoutStorageDate,
                                value: Number(item.inStorageNum),
                                value1: Number(item.outStorageNum)
                            }
                        })
                        inAdnOutData = _data;
                        pickingTrendsEcharts(inAdnOutData, document.getElementById('pickingTime'), ['入库', '出库'], 2, inAdnOutObj.param);
                    }
                })
        }

        // 请求仓库统计分析数据
        function getWarehouseTotal(_val) {
            admin.req('enterprise/home/admin/home/warehouseTotal', Object.assign({}, headerObj, {click: _val || 0}),
                res => {
                    if (res.code === 200) {
                        showWarehouseTotal(res.data)
                    } else {
                        showWarehouseTotal([])
                    }
                }
            )
        }

        // 渲染仓库统计分析
        function showWarehouseTotal(_data) {
            // 根据不同统计维度显示不同数据
            if (Object.keys(_data).length > 0) {
                $("#inventoryTotal").text(_data.inventoryTotal);
                $("#materialTypeTotal").text(_data.materialTypeTotal);
                if (headerObj.queryType == 3) {
                    $("#inStorageTotal").text(_data.todayInStorageTotal);
                    $("#outStorageTotal").text(_data.todayOutStorageTotal);
                } else if (headerObj.queryType == 2) {
                    $("#inStorageTotal").text(_data.weekInStorageTotal);
                    $("#outStorageTotal").text(_data.weekOutStorageTotal);
                } else if (headerObj.queryType == 1) {
                    $("#inStorageTotal").text(_data.monthInStorageTotal);
                    $("#outStorageTotal").text(_data.monthOutStorageTotal);
                } else {
                    $("#inStorageTotal").text(_data.inStorageTotal);
                    $("#outStorageTotal").text(_data.outStorageTotal);
                }
            }
            // _data.forEach((item, index) => {
            //     $('#statBoxItem>.statBoxItemList').eq(index).attr('sign', item.sign);
            // })
        }

        // 仓库统计分析点击事件
        $('#statBoxItem .statBoxItemList').click(function () {
            let that = $(this);
            if (that.attr('sign') == 1) {
                window.location.href = window.location.origin + window.location.pathname + '#/cabinet/cellInventoryAlarm';
                return false;
            }
            admin.open({
                type: 1,
                area: ['1280px', '750px'],
                offset: '65px',
                title: that.find('.statBoxItemListName').text(),
                content: $('#materialDataPop').html(),
                success: function () {
                    let colsData = [
                        {type: 'numbers', 'title': '序号'}
                        , {field: 'name', sort: true, title: '物料名称'}
                        , {field: 'cabCode', sort: true, title: '柜子编号'}
                        , {field: 'spaceCode', sort: true, title: '货道编码'}
                        , {field: 'quantity', sort: true, title: '数量'}
                        , {field: 'creatorName', sort: true, title: '创建人'}
                        , {field: 'time', sort: true, title: '时间'}
                    ], materialDataData = [];

                    if (that.attr('sign') == 1) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'skuName', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编号'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'productTypeName', sort: true, title: '物料类型'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'spaceCode', sort: true, title: '货道编号'}
                            // , {field: '', sort: true, title: '库存容量'}
                            // , {field: '', sort: true, title: '当前库存'}
                            // , {field: '', sort: true, title: '建议补货数'}

                        ];
                    } else if (that.attr('sign') == 2) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'name', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编号'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'quantity', sort: true, title: '包装数', templet: d => d.quantity + '盒'}
                            , {field: 'baseQuantity', sort: true, title: '基础单位数', templet: d => d.baseQuantity + '支'}
                            // , {field: 'spaceCode', sort: true, title: '货道/库位数', templet: d => d.spaceCode + '个'}
                            , {
                                field: 'deviceCode',
                                sort: true,
                                title: '设备编码',
                                templet: d => d.deviceCode ? d.deviceCode : '未选设备'
                            }
                            , {field: 'creatorName', sort: true, title: '创建人'}
                            , {field: 'time', sort: true, title: '时间'}
                        ];
                    } else if (that.attr('sign') == 3) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'code', sort: true, title: '领取记录编号', width: 120}
                            , {field: 'name', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编码'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'departmentName', sort: false, title: '部门'}
                            , {field: 'costCenter', sort: false, title: '成本中心'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'spaceCode', sort: true, title: '货道编号'}
                            , {field: 'baseQuantity', sort: true, title: '基础单位数', templet: d => d.baseQuantity + '支'}
                            , {field: 'total', sort: true, title: '金额'}
                            , {
                                field: 'deviceCode',
                                sort: true,
                                title: '设备编码',
                                templet: d => d.deviceCode ? d.deviceCode : '未选设备'
                            }
                            , {field: 'creatorName', sort: true, title: '领用人'}
                            , {field: 'time', sort: true, title: '领用时间'}
                        ];
                    } else if (that.attr('sign') == 4) {
                        colsData = [
                            {type: 'numbers', 'title': '序号'}
                            , {field: 'code', sort: true, title: '领取记录编号', width: 120}
                            , {field: 'name', sort: true, title: '物料名称'}
                            , {field: 'skuCode', sort: true, title: '物料编码'}
                            , {field: 'oldSpecCode', sort: true, title: '物料规格码'}
                            , {field: 'departmentName', sort: false, title: '部门'}
                            , {field: 'costCenter', sort: false, title: '成本中心'}
                            , {field: 'cabCode', sort: true, title: '柜子编号'}
                            , {field: 'spaceCode', sort: true, title: '货道编码'}
                            , {field: 'baseQuantity', sort: true, title: '基础单位数', templet: d => d.baseQuantity + '支'}
                            , {field: 'total', sort: true, title: '金额'}
                            , {
                                field: 'deviceCode',
                                sort: true,
                                title: '设备编码',
                                templet: d => d.deviceCode ? d.deviceCode : '未选设备'
                            }
                            , {field: 'creatorName', sort: true, title: '领用人'}
                            , {field: 'time', sort: true, title: '领用时间'}
                            // , {field: 'total', sort: true, title: '总计'}
                        ];
                    }

                    admin.reqSync('enterprisecab/bill/admin/workshopReport/list', Object.assign({}, headerObj, {click: that.index() + 1}), res => {
                        if (res.code === 200) {
                            materialDataData = res.data;
                        }
                    });

                    let materialDataTb = table.render({
                        elem: '#materialDataTable',
                        // url: config.base + 'enterprisecab/bill/admin/workshopReport/list',
                        // where: Object.assign({}, headerObj, {click: that.attr('sign')}),
                        data: materialDataData,
                        title: that.find('.statBoxItemListName').text(),
                        cellMinWidth: 100,
                        // height: 550,
                        page: true,
                        cols: [colsData],
                    });

                    table.resize("materialDataTable");

                    $('#materialDataFormExport').click(function () {
                        // table.exportFile(materialDataTb.config.id, layui.table.cache["materialDataTable"], 'xls');
                        table.exportFile(materialDataTb.config.id, materialDataData, 'xls');
                    })
                }
            });
        });


        // 请求所有报表数据;
        function getReportData(_data) {
            for (let item in _data) {
                if (configData[item].url) {
                    admin.req(configData[item].url, Object.assign({}, headerObj, configData[item].parameter), res => {
                        if (res.code === 200) {
                            console.log(configData[item].parameter)
                            let _total = 0, _id = configData[item].id;
                            res.data.forEach(ele => {
                                _total += configData[item].parameter.param == 'qua' ? ele.quantity : parseFloat(ele.amount)
                            });
                            let list = res.data.map(ele => {
                                let val = configData[item].parameter.param == 'qua' ? ele.quantity : parseFloat(ele.amount);
                                let _name = '';
                                if (_id == 'vendorItemConsumption') {
                                    _name = ele.productTypeName
                                } else if (_id == 'equipmentPicking' || _id == 'personnelPicking') {
                                    _name = ele.skuSpec
                                } else if (_id == 'productPicking') {
                                    _name = ele.warehouseTypeName
                                } else if (_id == 'workOrderPicking' || _id == 'shopFloorPicking') {
                                    _name = ele.inventoryTypeName
                                }
                                return {
                                    total: _total,
                                    name: _name,
                                    value: val,
                                    ratio: _total > 0 ? ((val / _total) * 100).toFixed(2) + '%' : '0.00' + '%'
                                }
                            })
                            configData[item].data = list;
                            showReport(configData[item])
                        }
                    })
                }
            }
        }

        function showReport(_data) {
            if (_data.style === 16) {
                showReportTemplate16(_data, document.getElementById(_data.id).querySelector('.reportItemEcharts'))
            } else if (_data.style === 4) {
                showReportTemplate4(_data, document.getElementById(_data.id).querySelector('.listBox1'))
            }
        }


        // 时间选择
        form.on('select(timeType)', function (data) {
            headerObj.queryType = data.value;
            headerObj.startTime = '';
            headerObj.endTime = '';
            $('#time1').val('');
            getReportData(configData);
            getWarehouseTotal()
            getInAndOutStorageEcharts(headerObj)
        });

        let time1 = laydate.render({
            elem: '#time1',
            eventElem: '#timeIcon',
            trigger: 'click',
            type: 'date',
            range: "至",
            done: function (value, date, endDate) {
                if (value) {
                    let timeArray = value.split("至");
                    $('select[lay-filter="timeType"]').val('');
                    headerObj.queryType = '';
                    headerObj.startTime = timeArray[0].trim() + " 00:00:00";
                    headerObj.endTime = timeArray[1].trim() + " 23:59:59";
                } else {
                    $('select[lay-filter="timeType"]').val(2);
                    headerObj.type = 1;
                    headerObj.startTime = '';
                    headerObj.endTime = '';
                }
                form.render('select');
                getReportData(configData);
                getWarehouseTotal();
                getInAndOutStorageEcharts(headerObj)
            }
        });


        // 显示采购趋势变化图头部切换
        $('#pickingTrends .reportItemHeaderSwitch>div').click(function () {
            if (!$(this).hasClass('active')) {
                //qua 数量  money金额
                $(this).index() === 0 ? pickingTrendsObj.param = 'qua' : pickingTrendsObj.param = 'money';
                $(this).addClass('active').siblings().removeClass('active');
                getPickingTrendsEcharts(pickingTrendsObj);
            }
        });

        function pickingTrendsEcharts(_data, _ele, tipsText, echartsType, scope) {
            let _elem = _ele.querySelector('.reportItemEcharts');
            $(_ele).find('.reportItemHeaderTitle').text(_data.title);
            $(_ele).find('.reportItemUnit').text(scope == 'qua' ? '数量' : '金额');
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            let xAxisData = [], option;
            let initData = _data, seriesData = [], xAxisData1 = [];
            initData.forEach(item => {
                xAxisData.push(item.name);
                if (item.value1 != null) {
                    xAxisData1.push(item.value1)
                } else {
                    if (pickingTrendsObj.Total > 0) {
                        item.ratio = ((item.value / pickingTrendsObj.Total) * 100).toFixed(2) + '%';
                    } else {
                        item.ratio = '0%'
                    }
                }
            });
            seriesData = initData.slice(-32);
            xAxisData = xAxisData.slice(-32);
            xAxisData1 = xAxisData1.slice(-32);
            let markLine;
            if (echartsType === 1) {
                markLine = {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }],
                    label: {
                        normal: {
                            formatter: '平均值:\n {c}'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#FFB94D'
                        }
                    },
                }
            } else {
                markLine = ''
            }
            option = {
                tooltip: {
                    trigger: "axis",
                    borderRadius: '5',
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.8)',
                    color: '#333333',
                    formatter: function (parms) {
                        let htmlStr = '', str = '', ratioHtml = '';
                        parms.forEach(item => {
                            if (item.data.ratio && echartsType === 1) {
                                ratioHtml += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">占比</div><div style="color: ${item.color}">${item.data.ratio}</div>
                                       </div>`
                            }
                            htmlStr += `<div style='display: flex;font-size: 12px;color: #333;justify-content: space-between;'>
                                           <div style="margin-right: 30px">${item.marker}${item.seriesName}</div>
                                           <div style="color: ${item.color}">${item.value}</div>
                                       </div>`
                        });
                        str = "<div style='border-radius:5px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;'>" +
                            "<div style='font-size: 14px;font-weight: 400;color: #666'>" + parms[0].name + "</div>" + htmlStr + ratioHtml + "</div>";
                        return str;
                    }
                },
                legend: [
                    {
                        data: tipsText,
                        icon: 'line',
                        right: '5%',
                        itemWidth: 20,
                        itemHeight: 20,
                        textStyle: {
                            fontSize: 16
                        }
                    },

                ],
                grid: {
                    top: '40',//上边距
                    right: '65',//右边距
                    left: '10',//左边距
                    bottom: '10%',//下边距
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: {
                        margin: 20,
                        // rotate: -30,//旋转
                        formatter: (v) => v.slice(0, 10)
                    },
                    axisTick: {
                        show: false //隐藏X轴刻度
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#000"
                        }
                    },
                },
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        color: 'rgba(0,0,0,0.65)',

                        textStyle: {
                            fontSize: 14
                        },
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(223, 223, 223, 1)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(223, 223, 223, 1)',
                            type: "dashed",
                        }
                    }
                }],
                series: [
                    {
                        type: 'line',
                        data: seriesData,
                        name: tipsText[0],
                        symbolSize: 10, //标记的大小
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (parms) {
                                return parms.value > 0 ? parms.value : ''
                            }
                        },
                        lineStyle: {
                            color: "#009C5E",
                            width: 4,
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#009C5E",
                            borderWidth: 5,
                        },
                        smooth: 0.4,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 156, 94,0.1)'
                                },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 156, 94,0)'
                                    }
                                ], false),
                                shadowColor: 'rgba(0, 156, 94, 0.9)',
                                shadowBlur: 20
                            }
                        },

                        markLine: markLine
                    },
                    {
                        type: 'line',
                        data: xAxisData1,
                        symbolSize: 10, //标记的大小
                        name: '出库',
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (parms) {
                                return parms.value > 0 ? parms.value : ''
                            }
                        },
                        lineStyle: {
                            color: "#fea32b",
                            width: 4,
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#fea32b",
                            borderWidth: 5,
                        },
                        smooth: 0.4,
                    },
                ],
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [0],
                    bottom: 0,
                    start: 100 - (10 / seriesData.length) * 100,
                    end: 100,
                    handleSize: '110%',
                    handleStyle: {color: "#009C5E"},
                    textStyle: {color: "#000"},
                    fillerColor: "rgb(0,181,89,0.3)",
                    borderColor: "rgb(0,181,89,0.3)",

                }],
            };
            option && myChart.setOption(option, true);
        }


        $('.reportMainAll .reportItemHeaderSwitch>div').click(function () {

            if (!$(this).hasClass('active')) {
                if (configData[$(this).parents('.reportItem').attr('id')]) {
                    let obj = {};
                    //qua 数量  money金额
                    configData[$(this).parents('.reportItem').attr('id')].parameter.param = $(this).index() === 0 ? 'qua' : 'money';

                    obj[$(this).parents('.reportItem').attr('id')] = configData[$(this).parents('.reportItem').attr('id')];

                    getReportData(obj);

                    $(this).addClass('active').siblings().removeClass('active');
                }
            }
        });

        //模板4
        function showReportTemplate4(_data, _elem) {
            console.log(_data);
            let html = "";
            if (!_data.data || _data.data.length === 0) {
                html += '<h3 style="text-align: center;line-height: 50px">暂无内容~</h3>'
            } else {
                let data = _data.data.slice(0, 10);
                let refer = '';
                data.forEach((item, index) => {
                    if (index == 0) {
                        refer = data[index].value;
                    }
                    item.name = item.name ? item.name : '未知物料';
                    html += `<div class="listItem1">
                                <div class="listItem1Name" title="${item.name}">${item.name}</div>
                                <div class="listItem1ProgressBox">
                                    <div class="listItem1ProgressBar" style="width: ${(item.value / refer) * 100}%" val="${priceUnit(item.value)}"></div>
                                </div>
                                <div class="listItem1Ratio">${isNullObj(item.ratio)}</div>
                            </div>`
                })
            }
            $(_elem).html(html);
        }

        //模板16
        function showReportTemplate16(_data, _elem) {
            console.log(_data)
            // let _total = 0;
            // _data.data.forEach(item => {
            //     _total += item.quantity
            // })
            $(_elem).attr('_echarts_instance_', '');
            const chartDom = _elem;
            const myChart = echarts.init(chartDom);
            const colorList = ['#009C5E', '#2CBB79', '#AAD976', '#B6CD6A', '#DEB887', "#00C573", "#009AF0", "#647EFB", '#FFB94D', '#FF6552'];
            let xAxisData = [], seriesData = [], option;
            let data = _data.data.slice(0, 10);
            let total = data.length > 0 ? data[0].total : 0;
            data.forEach(item => {
                // item.ratio = ((item.quantity / _total) * 100).toFixed(2) + '%';
                // item.name = item.inventoryTypeName;
                // item.value = item.quantity;
                xAxisData.push(item.name);
                seriesData.push(item);
            });

            option = {
                color: colorList,
                tooltip: {
                    trigger: 'item',
                    show: true,
                    padding: 0,
                    backgroundColor: 'rgba(255,255,255,.7)',
                    formatter: function (parms) {
                        let str;
                        str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;color: #2CBB79;min-width: 120px;max-width:200px;overflow: hidden;white-space:pre-line'>" +
                            "<div style='word-wrap:break-word;'>数值：" + parms.data.value + "</div>" +
                            "<div style='word-wrap:break-word;'>占比：" + isNullObj(parms.data.ratio) + "</div>" +
                            "<div style='word-wrap:break-word;'>名称：" + parms.data.name + "</div></div>";
                        return str;
                    }
                },
                title: {
                    text: priceUnit(total),
                    subtext: _data.parameter.param === 'money' ? '金额' : '总数',
                    itemGap: 0,
                    align: 'center',
                    textAlign: 'center',
                    y: 'center',
                    x: '26%',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        lineHeight: '24',
                    },
                    subtextStyle: {
                        fontSize: 12,
                        color: '#000'
                    },
                },
                legend: {
                    orient: 'vertical',
                    left: '57%',
                    top: 'center',
                    align: 'left',
                    itemWidth: 4,
                    itemHeight: 30,
                    type: 'scroll',
                    itemStyle: {
                        borderRadius: 30,
                    },
                    itemGap: 15,
                    formatter: function (params) {
                        let value = "", ratio = "";
                        seriesData.forEach(item => {
                            if (item.name == params) {
                                value = item.value;
                                ratio = item.ratio;
                            }
                        });
                        return [`{name|${params}}\n{value|${value}} {ratio|${isNullObj(ratio)}}`];
                    },
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 14,
                                lineHeight: 20,
                                color: '#000',
                            },
                            value: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#333',
                                fontWeight: '500',
                                width: 80,
                                overflow: 'hidden',
                            },
                            ratio: {
                                fontSize: 14,
                                lineHeight: 16,
                                color: '#009C5E',
                                fontWeight: '500'
                            },
                        }

                    },
                },
                series: [
                    {
                        type: "pie",
                        center: ['27%', '50%'],
                        radius: ["30%", "50%"],
                        itemStyle: {
                            normal: {
                                // borderWidth: 2,
                                // borderColor: "#fff"
                            }
                        },
                        label: {
                            show: false
                        },
                        data: seriesData,
                    }
                ]
            };
            option && myChart.setOption(option, true);
        }

        // 判断是否是 空{}
        function isNullObj(_data) {
            if (_data) {
                if (JSON.stringify(_data) == "{}") {
                    return '0%'
                } else {
                    return _data
                }
            }
            return '0%';
        }

        //长度限制
        function limitLength(str, length) {
            // 如果字符串的长度小于等于限制的长度，则直接返回原字符串
            if (str.length <= length) {
                return str;
            }
            // 否则，只取前面限制长度的部分字符串，并在结尾加上省略号
            return str.slice(0, length) + '...';
        }

        // 更多
        $('.reportMainAll .reportItemHeaderMore').click(function () {

            if (configData[$(this).parents('.reportItem').attr('id')].data.length === 0) {
                layer.msg('暂时没有数据~~~', {icon: 5});
                return false;
            }
            showAllDataChart(configData[$(this).parents('.reportItem').attr('id')])
        });

        // 查看更多采购趁势变化图
        $('#pickingTrends .reportItemHeaderMore').click(function () {
            let _data = pickingTrendsData.map(item => {
                return {
                    name: item.name,
                    value: item.value,
                    ratio: ((Number(item.value) / pickingTrendsObj.Total) * 100).toFixed(2) + '%'
                }
            })
            let objData = {
                columnType: 'double', // 区分柱状图
                data: _data
            };
            showAllDataChart(objData)
        });


        // 更多弹窗
        function showAllDataChart(_data) {
            console.log(_data)
            admin.open({
                type: 1,
                area: ['1400px', '700px'],
                offset: '65px',
                title: _data.name || '采购趋势变化图',
                content: $('#allDataChart').html(),
                success: function () {
                    const myChart = echarts.init(document.getElementById('allDataChartFormchartDom'));
                    let seriesData = [], yAxisData = [], option, dataZoomObj = '',seriesData1 = [];
                    let colsData = [
                        {type: 'numbers', title: '序号'}
                    ];
                    let data = _data.data;
                    data.forEach(item => {
                        item.label = void 0;
                        item.labelLine = void 0;
                        yAxisData.push(item.name);
                        seriesData.push(item);
                        if(item.value1 && _data.columnType == 'double' && pickingTrendsObj.param == 'qua'){
                            seriesData1.push(item.value1)
                        }
                    });
                    console.log(data)
                    if (data[0].name) {
                        var title = "";
                        if(_data.id == "equipmentPicking"){
                            title = "出库物料";
                        } else if(_data.id == "personnelPicking"){
                            title = "入库物料";
                        } else if(_data.id == "workOrderPicking"){
                            title = "入库类型";
                        } else if(_data.id == "shopFloorPicking"){
                            title = "出库类型";
                        } else if(_data.id == "vendorItemConsumption"){
                            title = "物料类别";
                        } else if(_data.id == "productPicking"){
                            title = "仓库类型";
                        }
                        title += "名称";
                        colsData.push({field: 'name', title: title})
                    }


                    if (data[0].value != null) {
                        if(_data.columnType == 'double'){
                            colsData.push({field: 'value', title: '数量'})
                        } else {
                            colsData.push({field: 'value', title: '值'})
                        }
                    }
                    if (data[0].value1 && _data.columnType == 'double' && pickingTrendsObj.param == 'qua') {
                        colsData.push({field: 'value', title: '数量(包装计)'})
                    }
                    if (data[0].ratio) {
                        colsData.push({field: 'ratio', title: '占比'})
                    }
                    if (data[0].oldSpecCode && _data.id != "pickingItemClassification") {
                        colsData.push({field: 'oldSpecCode', title: '物料规格'})
                    }
                    if (data[0].skuCode) {
                        colsData.push({field: 'skuCode', title: '物料编号'})
                    }
                    if (data[0].productCategoryName) {
                        colsData.push({field: 'productCategoryName', title: '物料分类'})
                    }



                    if (seriesData.length > 10) {
                        dataZoomObj = {
                            type: 'slider',
                            show: true,
                            right: 5,
                            width: 20,
                            start: 100 - (10 / seriesData.length) * 100,
                            end: 100,
                            yAxisIndex: 0,
                            handleStyle: {color: "#009C5E"},
                            textStyle: {color: "#000"},
                            fillerColor: "rgb(0,181,89,0.3)",
                            borderColor: "rgb(0,181,89,0.3)",
                        }
                    } else {
                        dataZoomObj = ''
                    }
                    option = {
                        color: ['#2CBB79'],
                        tooltip: {
                            trigger: "axis",
                            padding: 0,
                            backgroundColor: 'rgba(255,255,255,.7)',
                            formatter: function (parms) {
                                let str = '', code = '', time = '',numValue='';
                                if (parms[0].data.oldSpecCode && _data.id != "pickingItemClassification") {
                                    code = "<div>规格：" + parms[0].data.oldSpecCode + "</div>"
                                } else {
                                    code = ""
                                }
                                if (parms[0].data.time) {
                                    time = "<div><span style='color:#999'>" + parms[0].data.time + "</span></div>"
                                }
                                if(_data.columnType == 'double' && pickingTrendsObj.param == 'qua' && parms[0].data.value1){
                                    numValue = "<div>数量(基础单位计算)：" + parms[0].data.value + "</div>" +
                                        "<div style='color:#00BFFF'>数量(包装计算)：" + parms[0].data.value1 + "</div>"
                                }else {
                                    numValue = "<div>数值：" + parms[0].data.value + "</div>"
                                }

                                str = "<div style='border-radius:5px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);padding: 15px;min-width: 120px;color: #2CBB79'>" +
                                    numValue +
                                    "<div>占比：" + isNullObj(parms[0].data.ratio) + "</div>" + code +
                                    "<div>名称：" + parms[0].data.name + "</div>" + time +
                                    "</div>";
                                return str;
                            }
                        },
                        grid: {
                            left: '0',
                            right: '8%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: _data.name ? (_data.id == 'pickingTime' ? yAxisData : [...yAxisData].reverse()) : yAxisData,
                            axisLabel: {
                                color: '#333333',
                                textStyle: {
                                    fontSize: 12
                                },
                                formatter: (v) => {
                                    if (v.length > 10) {
                                        v = v.substring(0, 15) + '...';
                                    }
                                    return v;
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(107,107,107,0.37)',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        dataZoom: dataZoomObj,
                        series: [
                            {
                                name: _data.data.title,
                                type: 'bar',
                                barWidth: '15',
                                data: _data.name ? [...seriesData].reverse() : seriesData,
                                markLine: {
                                    data: [{
                                        type: 'average',
                                        name: '平均值'
                                    }],
                                    label: {
                                        normal: {
                                            formatter: '平均值:\n {c}'
                                        }
                                    },
                                    lineStyle: {
                                        normal: {
                                            color: '#FFB94D'
                                        }
                                    },
                                },
                                label: {
                                    show: true,
                                    position: 'right', // 位置
                                    color: '#333333',
                                    fontSize: 12,
                                    fontWeight: '400', // 加粗
                                    distance: 5, // 距离
                                    rich: {
                                        val: {
                                            color: '#333333',
                                        },
                                        ratio: {
                                            color: '#009C5E'
                                        }
                                    },
                                    formatter: function (param) {
                                        return '{val|' + param.data.value + ' } {ratio|' + isNullObj(param.data.ratio) + '}';
                                    },
                                },
                            },
                            // {
                            //     name: _data.data.title,
                            //     type: 'bar',
                            //     // stack: '1',
                            //     barWidth: '15',
                            //     data: _data.name ? [...seriesData1].reverse() : seriesData1,
                            //     itemStyle: { //柱子颜色
                            //         normal: {
                            //             color: '#00BFFF',
                            //         }
                            //     },
                            //     label: {
                            //         show: true,
                            //         position: 'right', // 位置
                            //         color: '#333333',
                            //         fontSize: 12,
                            //         fontWeight: '400', // 加粗
                            //     },
                            // }
                        ]
                    };

                    option && myChart.setOption(option, true);


                    let allDataChartTb = table.render({
                        elem: '#allDataChartTable',
                        data: data,
                        cellMinWidth: 100,
                        page: false,
                        cols: [colsData],
                    });

                    if (data.length === 0) {
                        $('#allDataChartFormExport').remove();
                    } else {
                        $('#allDataChartFormExport').click(function () {
                            console.log(data);
                            console.log(colsData);
                            table.exportFile(allDataChartTb.config.id, data, 'xls', _data.name || '采购趋势变化图');
                        })
                    }

                }
            });

        }

        // 渲染下拉框
        function loadReportSelectHtml(data, tips, htmltarget, type, parentName) {
            let html = ' <option value="">' + tips + '</option>';
            if (!data || data == null) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                if (type == 1) {
                    html += `<option value='${data[i].name}'>${data[i].name}</option>`;
                } else if (type == 2) {
                    html += `<option value='${data[i].id}'>${data[i].code}</option>`;
                } else if (type == 3) {
                    html += `<option value='${data[i].id}'>${data[i].corporateName}</option>`;
                }
            }
            $("#" + parentName).find("select[name='" + htmltarget + "']").html(html);
            form.render('select');
        }

        //单位
        function priceUnit(num) {
            let unit = ['', '万', '亿', '万亿'];
            let k = 10000, i;
            if (num < k) {
                return num
            } else {
                i = Math.floor(Math.log(num) / Math.log(k));
                return (num / Math.pow(k, i)).toFixed(2) + unit[i]
            }
        }
    });
</script>
